<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
        	background: url("http://activityfiles.oss-cn-hangzhou.aliyuncs.com/2015/10/16-14-08/562094645f8ce.jpg") center top no-repeat #ac1812;
            font-family: Microsoft YaHei;
        	background-size: 100% 100%;        	
        }
        li{
            list-style: none;
        }
        .wrapper{
            width: 96%;
            padding-left: 4%;
            overflow: hidden;
        }
        .head-tit{
            width: 60%;
            margin: 30px auto;
        }
        .head-tit img{
            width: 100%;
        }
        .info-tit-each{
            width: 88%;
            padding-left: 12%;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-weight: bold;
            color: #ffdf04;
            float: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #690000;
            border-radius: 20px;
        }
        .info-txt{
            width: 23%;
            float: left;
            margin-bottom: 8px;
            margin-right: 1%;
        }
        .info-txt-each{
            width: 92%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            margin: 5px 0px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .txt-num{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            color: #690000;
            text-align: center;
            line-height: 20px;
            margin-right: 5px;
        }
        .num-bg1{
            background: #ffc704;
        }
        .num-bg2{
            background: #ff9804;
        }
        .num-bg3{
            background: #e2dfdc;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="head-tit">
        <img src="http://activityfiles.oss-cn-hangzhou.aliyuncs.com/2016/2016/03/03-09-52/56d798c23d603.png">
    </div>
    <noempty name="category_list">
    	<volist name="category_list" id="vo">
	        <ul class="info-txt" id="conf_category_{$vo.conf_category_id}" data-id="{$vo.conf_category_id}" >
	            <div class="bg"></div>
	            <li class="info-tit-each">{$vo.conf_category}</li>
	            <li class="info-txt-each"><span class="txt-num num-bg1">1</span></li>
	            <li class="info-txt-each"><span class="txt-num num-bg2">2</span></li>
	            <li class="info-txt-each"><span class="txt-num num-bg3">3</span></li>
	        </ul>
        </volist>
    </noempty>
</div>
<script src="http://activityfiles.oss-cn-hangzhou.aliyuncs.com/2015/09/14-16-35/55f686c931275.js"></script>
<script>
//禁止右键
document.oncontextmenu = function(){ return false; }
//禁止刷新
document.onkeydown = function(event){
 var e = event || window.event || arguments.callee.caller.arguments[0];
     if(e && e.keyCode==116){
       return false;
     }
}

var time_index = 0;
function category_update(id){
	if(id == null || id == 0) return false;
	$.post("{:U('getCategoryTops')}", { conf_category_id : id }, call_back, 'json');
	return false;
	function call_back(data){
		if(data){
			// 有数据
			var name = '#conf_category_' + id;
			$(name + '>li').each(function(e){
				if(e > 0) $(this).remove();
			});
			$(name).append(data);
		}
		setTimeout(function(){ category_update(id) }, 100000);
	}
}
$(function(){
	$('ul').each(function(){
		var id = $(this).attr('data-id');
		time_index = time_index + 5000;
		setTimeout(function(){ category_update(id) }, time_index);
	});
});
</script>
</body>
</html>